import React, { Component } from "react";
import "./App.css";
import Header from "./components/Header/Header";
import List from "./components/List/List";
import Footer from "./components/Footer/Footer";

export default class App extends Component {
  // 初始化状态
  state = {
    todos: [
      {
        id: 1,
        name: "吃饭",
        done: true,
      },
      {
        id: 2,
        name: "睡觉",
        done: true,
      },
      {
        id: 3,
        name: "打豆豆",
        done: false,
      },
    ],
  };

  getTodo = (todoObj) => {
    // 获取当前todos状态
    const { todos } = this.state;
    // 创建一个新数组
    const newTodos = [todoObj, ...todos];
    // 更新数据
    this.setState({
      todos: newTodos,
    });
  };

  // 删除todo
  delTodo = (id) => {
    const { todos } = this.state;
    this.setState({
      todos: todos.filter((todo) => todo.id !== id), //接收id并删除todo
    });
  };
  // 更新todo
  updateTodo = (id, done) => {
    const { todos } = this.state;
    // 处理数据
    const newTodos = todos.map((todo) => {
      if (todo.id === id)
        return { ...todo, done }; //如果匹配到id相同的todo，修改done状态
      else return todo;
    });
    this.setState({
      todos: newTodos,
    });
  };
  // 全选、取消全选
  allChecked = (checked) => {
    console.log("checked", checked);

    const { todos } = this.state;
    const newTodos = todos.map((todo) => {
      return { ...todo, done: checked };
    });
    this.setState({
      todos: newTodos,
    });
  };
  // 清除已完成的任务
  clearDoneTodo = () => {
    const { todos } = this.state;
    console.log(todos.filter((todo) => todo.done !== true));
    
    this.setState({
      todos: todos.filter((todo) => todo.done !== true),
    });
  };

  render() {
    const { todos } = this.state;
    return (
      <div id="app">
        <Header addItem={this.getTodo} />
        <List
          todos={todos}
          delTodo={this.delTodo}
          updateTodo={this.updateTodo}
        />
        <Footer
          todos={todos}
          allChecked={this.allChecked}
          clearDoneTodo={this.clearDoneTodo}
        />
      </div>
    );
  }
}
